<template>
  <div style="margin-top: 5px;">
    <titleBox text="鹭栖湖党组织情况" @click="show = !show"></titleBox>
    <div class="content"
      :style="{ height: show ? height + 'px' : '0px', transition: 'height 0.5s ease-in-out', overflow: 'hidden' }">
      <div ref="content" style="padding: 20px 10px;border: 1px solid #11afc180;">
        <div class="infoBox">
          <div class="itemBox" v-if="info">
            <div class="item">
              <div
                style="background-image: url('/img/myimg/lefticon3.png'); background-size: 17.74px 14.6px; width:17.74px; height:14.6px;">
              </div>
              <div class="name">党支部</div>
              <div class="num">{{ info.count.dept_count }}<span style="font-size:10px; font-weight: 400;">个</span></div>
              <div
                style="background-image: url('/img/myimg/righticon3.png'); background-size: 17.74px 14.6px; width:17.74px; height:14.6px;">
              </div>
            </div>
            <div class="item">
              <div
                style="background-image: url('/img/myimg/lefticon3.png'); background-size: 17.74px 14.6px; width:17.74px; height:14.6px;">
              </div>
              <div class="name">党员</div>
              <div class="num">{{ info.count.dangyuan_count }}<span style="font-size:10px; font-weight: 400;">人</span>
              </div>
              <div
                style="background-image: url('/img/myimg/righticon3.png'); background-size: 17.74px 14.6px; width:17.74px; height:14.6px;">
              </div>
            </div>
          </div>
          <div class="title">
            鹭栖湖社区<br>
            网格党组织力量
          </div>
          <div class="itemsBox" v-if="info">
            <!-- <div class="item" v-for="(item,i) in showData" :key="i" @click="wgModalShow(item,i)" @dblclick="dblwgClick(item)">
              <div class="box" :style="`bottom:${i < 3?(3 - i) * 20:i > 3 ? (i - 3) * 20 : 0 }px`">
                {{ item.name }}
              </div>
            </div> -->
            <swiper :modules="modules" :slides-per-view="7" :space-between="20" :loop="true"
              :pagination="{ clickable: true }" :centeredSlides="true" @swiper="onSwiper" @slideChange="onSlideChange">
              <swiper-slide v-for="(item, index) in info.list" :key="index" style="height: 100%;">
                <!-- <div style="position: relative; width: 100%; height: 100%;"> -->
                <!-- <div class="swiper_item" @click="wgModalShow(item,index)" @dblclick="dblwgClick(item)">
                    {{ item.name }}{{ index }}
                  </div> -->
                <div class="swiper_item">
                  <div class="item_box" @click="wgModalShow(item, index)" @dblclick="dblwgClick(item)"
                    :style="`bottom:${ppIndex(index) < 3 ? (3 - ppIndex(index)) * 20 : ppIndex(index) > 3 ? (ppIndex(index) - 3) * 20 : 0}px`">
                    {{ item.name }}
                  </div>
                </div>
              </swiper-slide>
            </swiper>
          </div>
        </div>
        <div class="dataBox" v-if="info">
          <div style="text-align: center; font-weight: bold;">{{ info.list[checkedWgIndex].name }}</div>
          <div style="display: flex; flex-direction: column; align-items: center; margin-top:5px;">
            <div style="font-size:12px; margin-bottom:5px;">网格长</div>
            <div>
              <div class="item" v-if="info.list[checkedWgIndex].wgz_list.length > 0">
                <div
                  :style="{ backgroundImage: 'url(' + (info.list[checkedWgIndex].wgz_list[0].image ? info.list[checkedWgIndex].wgz_list[0].image : '/img/myimg/avatar.png') + ')' }"
                  style="width: 30px; height:30px; background-size: 30px 30px; border-radius: 50%;"></div>
                <div style="flex:1;">
                  <div style="margin-left: 5px; font-size:10px; display:flex; align-items:center;">{{
                    info.list[checkedWgIndex].wgz_list[0].name }}<img
                      v-if="info.list[checkedWgIndex].wgz_list[0].is_dangyuan === 1" src="/img/myimg/danghui.png"
                      style="width:12px; height:13px; margin-left:5px; margin-bottom: 2px;" /></div>
                  <div style="margin-left: 5px; font-size:10px">{{ info.list[checkedWgIndex].wgz_list[0].phone }}</div>
                </div>
              </div>
              <div v-else style="padding: 20px 0; color:#999999; font-size: 12px; text-align: center;">
                暂无数据
              </div>
            </div>
          </div>
          <div style="display: flex; flex-direction: column; align-items: center; margin-top:5px;">
            <div style="font-size:12px; margin-bottom:5px;">网格员</div>
            <div v-if="info.list[checkedWgIndex].wgy_list.length > 0"
              style="display:flex; align-items:center;justify-content: space-between;">
              <div class="wgyitem" v-for="(wgy, j) in info.list[checkedWgIndex].wgy_list" :key="j">
                <div :style="{ backgroundImage: 'url(' + (wgy.image ? wgy.image : '/img/myimg/avatar.png') + ')' }"
                  style="width: 30px; height:30px; background-size: 30px 30px; border-radius: 50%;"></div>
                <div style="flex:1;">
                  <div style="margin-top:5px; font-size:10px; display:flex; align-items:center;">
                    {{ wgy.name }}
                    <img v-if="wgy.is_dangyuan === 1" src="/img/myimg/danghui.png"
                      style="width:12px; height:13px; margin-left:5px; margin-bottom: 2px;" />
                  </div>
                </div>
              </div>
            </div>

            <div v-else style="padding: 20px 0; color:#999999; font-size: 12px; text-align: center;">
              暂无数据
            </div>
          </div>
        </div>
      </div>
    </div>
    <wgModal ref="wgModalRef" @xfrw="xfrw"></wgModal>
    <xfrwModal ref="xfrwModalRef" @close="xfrwModalClose"></xfrwModal>
    <xfwrjrwModal ref="xfwrjrwModalRef" @close="xfwrjrwModalClose"></xfwrjrwModal>
  </div>
</template>
<script setup>
import $api from "@/utils/request.js"
import { ref, onMounted, nextTick } from "vue"
import { Swiper, SwiperSlide } from "swiper/vue"
import { Pagination } from "swiper/modules"
import "swiper/css"
import "swiper/css/pagination"
import titleBox from "../mConponents/titleBox.vue"
import wgModal from "../mConponents/modal/wgModal.vue"
import xfrwModal from "../mConponents/modal/xfrwModal.vue"
import xfwrjrwModal from "../mConponents/modal/xfwrjrwModal.vue"
const clickCount = ref(0)
const clickTimer = ref(null)

const emit = defineEmits(["toCenter"])
const ppIndex = (i) => {
  const index = showIndexs.value.findIndex(e => e === i)
  if (index === -1) {
    return -99
  }
  return index
}
const dblwgClick = (e) => {
  clearTimeout(clickTimer.value)
  clickCount.value = 0
  emit("toCenter", [e.lng, e.lat, 0])
}
const checkedWgIndex = ref(0)
const checkedWgData = ref(null)
const wgModalRef = ref(null)
const content = ref(null)
const height = ref(0)
const show = ref(false)
const onSwiper = (swiper) => {
  console.log(swiper)
  console.log(swiper.realIndex)
  checkedWgIndex.value = swiper.realIndex
}
const onSlideChange = (swiper) => {
  console.log(swiper.realIndex)
  checkedWgIndex.value = swiper.realIndex
  setShowIndexs()
}
const wgModalShow = (item, i) => {
  checkedWgIndex.value = i
  // alert(checkedWgIndex.value)
  // setShowData()
  // return
  checkedWgData.value = item
  clickCount.value++
  // setShowIndexs()
  if (clickCount.value === 1) {
    clickTimer.value = setTimeout(() => {
      wgModalRef.value.show(item)
      clickCount.value = 0
    }, 300)
  }
}
const showIndexs = ref(0)
const setShowIndexs = (e) => {
  const data = []
  if (info.value.list && info.value.list.length > 0) {
    // if (checkedWgIndex.value < 7) {
    //   // 取出七个赋值到data
    //   const listLength = info.value.list.length
    //   const startIndex = (checkedWgIndex.value - 4 + listLength) % listLength
    //   for (let i = 0; i < 7; i++) {
    //     const index = (startIndex + i) % listLength
    //     data.push(info.value.list[index])
    //   }

    // }
    const listLength = info.value.list.length
    const startIndex = (checkedWgIndex.value - 3 + listLength) % listLength
    for (let i = 0; i < 7; i++) {
      const index = (startIndex + i) % listLength
      data.push(index)
    }
    showIndexs.value = data
  }
}


const wgModalClose = () => {
  wgModalRef.value.close()
  clickCount.value = 0
  clearTimeout(clickTimer.value)
}


const xfrw = (e) => {
  if (e === "1") {
    xfrwModalShow()
  } else if (e === "2") {
    xfwrjrwModalShow()
  }
}

const showData = ref([])


const xfrwModalRef = ref(null)
const xfrwModalShow = () => {
  wgModalRef.value.close()
  xfrwModalRef.value.show()
}
const xfrwModalClose = () => {
  wgModalShow(checkedWgData.value, checkedWgIndex.value)
}
const xfwrjrwModalRef = ref(null)
const xfwrjrwModalShow = () => {
  wgModalRef.value.close()
  xfwrjrwModalRef.value.show()
}
const xfwrjrwModalClose = () => {
  wgModalShow()
}

const data = ref([
  {
    name: "党支部",
    num: "7",
    unit: "个"
  },
  {
    name: "党员",
    num: "256",
    unit: "名"
  }
  // {
  //   name: "网格员"
  // },
  // {
  //   name: "居民骨干"
  // }
])

const wgData = [
  {
    name: "望江山片区",
    center: [105.558286, 30.465568, 0],
    children: [
      {
        name: "李德生",
        children: [
          {
            name: "张静"
          }
        ]
      }
    ]
  },
  {
    name: "鹭栖湖片区",
    center: [105.557684, 30.459025, 0],
    children: [
      {
        name: "胡兰",
        children: [
          {
            name: "网格员"
          }
        ]
      }
    ]
  },
  {
    name: "兴洲观澜",
    center: [105.561542, 30.452184, 0],
    children: [
      {
        name: "钱均华",
        children: [
          {
            name: "杨晓灵"
          }
        ]
      }
    ]
  },
  {
    name: "克拉片区",
    center: [105.561542, 30.452184, 0],
    children: [
      {
        name: "伍佑均",
        children: [
          {
            name: "王春梅"
          },
          {
            name: "何芳"
          }
        ]
      }
    ]
  },
  {
    name: "健坤城片区",
    center: [105.558923, 30.450145, 0],
    children: [
      {
        name: "邹洪平",
        children: [
          {
            name: "网格员"
          },
          {
            name: "闫凤芝"
          }
        ]
      }
    ]
  },
  {
    name: "湖光九里片区",
    center: [105.55108, 30.455366, 0],
    children: [
      {
        name: "冯慧",
        children: [
          {
            name: "网格员"
          }
        ]
      }
    ]
  },
  {
    name: "华翔城片区",
    center: [105.548485, 30.458243, 0],
    children: [
      {
        name: "赵强",
        children: [
          {
            name: "李海凤"
          },
          {
            name: "舒小翠"
          },
          {
            name: "高环"
          },
          {
            name: "龙会"
          },
          {
            name: "赵琳"
          },
          {
            name: "姜艳"
          }
        ]
      }
    ]
  },
  {
    name: "喜盈门",
    center: [105.55108, 30.455366, 0],
    children: [
      {
        name: "赵强",
        children: [
          {
            name: "网格员"
          }
        ]
      }
    ]
  },
  {
    name: "管委会",
    center: [105.558923, 30.450145, 0],
    children: [
      {
        name: "赵强",
        children: [
          {
            name: "网格员"
          }
        ]
      }
    ]
  },
  {
    name: "义乌商贸",
    center: [105.55108, 30.455366, 0],
    children: [
      {
        name: "赵强",
        children: [
          {
            name: "网格员"
          }
        ]
      }
    ]
  }
]
const info = ref(null)
onMounted(() => {
  getData()
})
const getData = async () => {
  const res = await $api.get("/api/index/get_dept_list")
  if (res.code === 1) {
    info.value = res.data
    setShowIndexs()
    nextTick(() => {
      height.value = content.value.offsetHeight
      // show.value = true
    })
  }
}
defineExpose({ wgModalShow, wgModalClose, dblwgClick })
</script>
<style scoped lang="scss">
.org-tree {
  width: 100%;
  margin: 0 auto;
  display: table;

  //横向排列
  &.collapsable .org-tree-node {
    display: table-cell;
    padding: 10px 0px 5px 1px;
    text-align: center;
    position: relative;

    &:before,
    &:after {
      content: "";
      position: absolute;
      width: 50%;
      height: 20px;
    }

    &:before {
      top: 0;
      left: 0;
    }

    &:after {
      top: 0;
      left: 50%;
      border-left: 1px solid #ccc;
    }

    &:not(:first-child):before,
    &:not(:last-child):after {
      border-top: 1px solid #ccc;
    }

    .org-tree-node-label {
      // display: inline-block;
      position: relative;
      display: flex;
      justify-content: center;

      .org-tree-node-label-inner {
        // padding: 10px 0px;
        padding: 5px 0px 0 0px;
        margin: 10px 0 0 0;
        width: 20px;
        height: 100px;
        font-size: 10px;
        line-height: 15px;
        background: #4DDECF1A;
        border: 1px solid #4DDECF80;
        text-align: center;
        border-radius: 3px;

      }
    }

    .org-tree-node-children {
      padding-top: 10px;
      position: relative;

      &::before {
        content: "";
        display: block;
        width: 0;
        height: 10px;
        border-left: 1px solid #ccc;
        position: absolute;
        left: 50%;
        top: 0;
      }
    }
  }

  // &.collapsable>.org-tree-node:after {
  //   border-left: none;
  // }
}

.content {
  background-color: #001a1dcc;
  width: 340px;
  margin-top: 5px;

  .dataBox {
    margin-top: 10px;
    padding: 10px;
    background: linear-gradient(to left, #04ffff, #04ffff) left top no-repeat,
      linear-gradient(to bottom, #04ffff, #04ffff) left top no-repeat,
      linear-gradient(to left, #04ffff, #04ffff) right top no-repeat,
      linear-gradient(to bottom, #04ffff, #04ffff) right top no-repeat,
      linear-gradient(to left, #04ffff, #04ffff) left bottom no-repeat,
      linear-gradient(to bottom, #04ffff, #04ffff) left bottom no-repeat,
      linear-gradient(to left, #04ffff, #04ffff) right bottom no-repeat,
      linear-gradient(to left, #04ffff, #04ffff) right bottom no-repeat;
    background-size: 1px 10px, 10px 1px;
    border-radius: 2px;
    background-color: #4DDECF1A;

    .item {
      display: flex;
      align-items: center;
      width: 120px;
      margin-bottom: 10px;
      background-color: #00000066;
      padding: 5px 10px 5px 5px;
      border-radius: 99px;
    }


    .wgyitem {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 10px;
      padding: 5px 10px 5px 5px;
      border-radius: 99px;
    }
  }

  .infoBox {
    background-image: url('/img/myimg/dzzqkBg.png');
    background-size: 320px 276px;
    width: 320px;
    height: 276px;
    position: relative;

    .title {
      position: absolute;
      color: #E1FFFA;
      font-weight: bold;
      top: 40px;
      text-align: center;
      width: 60%;
      left: 20%;
      font-size: 18px;
    }

    .itemsBox {
      padding: 0px 10px 0 10px;
      display: flex;
      height: 100%;

      .item {
        height: 100%;
        position: relative;
        flex: 1;
        display: flex;
        justify-content: center;

        .box {
          cursor: pointer;
          height: 130px;
          width: 25px;
          font-size: 12px;
          display: flex;
          align-items: center;
          text-align: center;
          position: absolute;
          background: linear-gradient(180deg, rgba(21, 131, 119, 0.6) 0%, rgba(4, 73, 66, 0.6) 100%);
          border: 1px solid rgba(77, 222, 207, 0.5);
        }


        @keyframes moveUpAndDown {}
      }
    }

  }

  .itemBox {
    position: absolute;
    width: 100%;
    padding: 0 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .item {
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;


      .name {
        top: 0px;
        color: #ffffff;
        font-family: PingFang SC;
        font-size: 11px;
        line-height: 19.6px;
        letter-spacing: 0%;
        padding: 0 5px;
      }

      .num {
        top: 20px;
        color: rgba(193, 244, 255, 1);
        font-family: PingFang SC;
        font-weight: 600;
        font-size: 15px;
        line-height: 19.6px;
        letter-spacing: 0%;
        padding: 0 5px 0 0;
      }
    }
  }
}


.swiper_item {
  cursor: pointer;
  height: 100%;
  width: 40px;
  font-size: 12px;
  display: flex;
  // align-items: center;
  // text-align: center;
  position: relative;

  // background: linear-gradient(180deg, rgba(21, 131, 119, 0.6) 0%, rgba(4, 73, 66, 0.6) 100%);
  // border: 1px solid rgba(77, 222, 207, 0.5);
  .item_box {
    cursor: pointer;
    height: 130px;
    width: 25px;
    font-size: 12px;
    display: flex;
    align-items: center;
    text-align: center;
    position: absolute;
    background: linear-gradient(180deg, rgba(21, 131, 119, 0.6) 0%, rgba(4, 73, 66, 0.6) 100%);
    border: 1px solid rgba(77, 222, 207, 0.5);

  }
}
</style>
